<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%=title%>列表</title>
        <%- include('../layout/common-css.html');%>
        <link rel="stylesheet" type="text/css" href="/amazeui/css/amazeui.toast.css">
        <style type="text/css">
            .btn{
                cursor: pointer;
            }
            .des{
                width: 100%;
                height: 15rem;
                overflow:auto;
            }
        </style>
    </head>
    <body>
        <%- include('../layout/header.html');%>
        <div class="am-panel am-panel-default">
            <div class="am-panel-hd" style="text-align: center;">
                    <h3 class="am-panel-bd"><%if(!category || category=='SOME'){%>精选<%=title%><%}else if(category=='ALL'){%>所有<%=title%><%}else{%><%=category%><%}%></h3>
            </div>
            <div class="am-panel-bd">
                <div class="am-g" style="margin-left: 0;padding-left: 0;">
                  <div class="am-u-sm-4" style="margin-left: 0;padding-left: 0;">
                      <em><%=results.length%></em>条记录
                  </div>
                  <div class="am-u-sm-8">
                        <form class="am-form am-form-inline" method="get">
                        <div class="am-form-group">
                            <select name="category" id="category" data-am-selected>
                                <optgroup label="所有类别">
                                    <option value="SOME" <%if(category=='SOME'){%> selected<%}%>>精选</option>
                                    <option value="ALL" <%if(category=='ALL'){%> selected<%}%>>所有</option>
                                </optgroup>
                                <%for(let z of data_zone){%>
                                  <optgroup label="<%=z['name']%>">
                                    <%for(let c of z['categories']){%>
                                        <option value="<%=c%>" <%if(category==c){%> selected<%}%>><%=c%></option>
                                    <%}%>
                                  </optgroup>
                                <%}%>
                            </select>
                        </div>
                        <div class="am-form-group">
                            <input type="text" name="keyword" class="am-form-field am-round"<%if(keyword){%> value="<%=keyword%>"<%}%> placeholder="请输入关键词查询"/>
                        </div>
                        <div class="am-form-group">
                            <button type="submit" class="am-btn am-btn-primary am-radius">查询</button>
                        </div>
                    </form>
                  </div>
                </div>

                <ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3" style="margin-top: 2rem;">
                    <%for(let d of results){%>
                    <li style="padding: 1rem;">
                        <div class="am-panel am-panel-warning">
                          <div class="am-panel-hd">
                            <div class="am-fl"><strong><%=d['name']%></strong><%if(!category || category == 'ALL' ||  category == 'SOME'){%>【<%=d['category']%>】<%}%></div>
                            <div class="am-fr">
                                <a href="/datas/view/<%=d['rule']%>?name=<%=d['name']%>&category=<%=d['category']%>" target="_blank"><i class="am-icon-external-link"></i></a>
                            </div>
                            <div class="am-cf"></div>
                          </div>
                          <div class="am-panel-bd">
                            <div class="des"><%-d['show']||d['message'].replace(/\n/ig,'<br/>')%></div>
                            <%if(d['values']){%>
                                <div class="am-comment-meta"><%-JSON.stringify(d['values'])%></div>
                            <%}%>
                            <div class="am-fr">
                                <i class="btn am-icon-copy am-text-primary"><textarea class="hide"><%-d['show']||d['message']%></textarea></i>
                            </div>
                            <div class="am-cf"></div>
                          </div>
                          <div class="am-panel-footer">
                                <div class="am-fl am-text-xs">
                                    <i class="am-icon-vimeo" style="margin-right: 0.3rem;"></i><%=d['version']%>
                                </div>
                                <div class="am-fr am-text-xs">
                                    <i class="am-icon-calendar-check-o" style="margin-right: 0.3rem;"></i><%=getAppropiateDateDescription(d['updated'])%>（<%=dateFormat(d['updated'],'yyyy-MM-dd hh:mm:ss')%>）
                                </div>
                                <div class="am-cf"></div>
                          </div>
                        </div>
                    </li>
                    <%}%>

                </ul>

            </div>
            
        </div>
        <%- include('../layout/bottom-js.html');%>
        <script type="text/javascript" src="/amazeui/js/amazeui.toast.js"></script>
        <script type="text/javascript" src="/js/clipboard.min.js"></script>
        <script type="text/javascript">
            var clipboard = new ClipboardJS('.btn',{
                text: function(trigger) {
                    return trigger.querySelector('textarea').value;
                }
            });
            clipboard.on('success', function(e) {
                // console.info('Action:', e.action);
                // console.info('Text:', e.text);
                // console.info('Trigger:', e.trigger);

                e.clearSelection();

                $('body').toast({
                    text: '复制好了，去粘贴吧！',
                    duration: 1000,
                    type:'success'
                });
            });

            // clipboard.on('error', function(e) {
            //     console.error('Action:', e.action);
            //     console.error('Trigger:', e.trigger);
            // });
        </script>
</body>
</html>